<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>2-3 webgl 入门 - 给画布换个颜色</title>
</head>
<body>
  <!-- canvas -->
  <canvas id="canvas" width="400" height="400">
    此浏览器不支持canvas
  </canvas>

  <!-- webgl -->
  <canvas id="webgl" width="400" height="400">
    此浏览器不支持canvas
  </canvas>

  <script>
    const ctx = document.getElementById('canvas');
    const c = ctx.getContext('2d');
    c.fillStyle = 'red'
    c.fillRect(10, 10, 100, 100);

    const ctx1 = document.getElementById('webgl');
    const gl = ctx1.getContext('webgl');
    gl.clearColor(1.0, 0.0, 0.0, 1.0);        // red 1.0  green 0.0  blue 0.0  alpha 1.0
    gl.clear(gl.COLOR_BUFFER_BIT);
  </script>
</body>
</html>